import  React from 'react'
import ReactMixin from 'react-mixin'
import Reflux from 'reflux'
import  {Link} from 'react-router'

import Action from '../../action/action'
import Store from '../../store/store'
import '../../less/home.less'

import Search from '../../component/search/search'
import Shuffling from '../../component/shuffling/shuffling'
import AdList from '../../component/adList/adList'
import ProductList from '../../component/productList/productList'
import FootNavBar from '../../component/footNavBar/footNavBar'

export default class Home extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            bannerList: [],
            homeProductList : [],
        }
    }
    componentDidMount(){
        Action.getBannerList();
        Action.getHomeProductList()
    }
    render(){
        const homeMidBar = [
            {
                icon : "icon-youxuan",
                text : "优选",
                link : "",
            },
            {
                icon : "icon-libao",
                text : "礼包",
                link : "",
            },
            {
                icon : "icon-juan1",
                text : "卡券",
                link : "",
            },
            {
                icon : "icon-icon2",
                text : "专题",
                link : "",
            }
        ];
        let list = [];
        homeMidBar.map((item,i) => {
            list.push(
                <Link to={item.link} key={i}><i className={`iconfont ${item.icon}`}> </i>{item.text}</Link>
            )
        });
        return(
            <div className="home">
                <Search/>
                <div className="banner">
                    <Shuffling autoPlay={true} delay={3} items={this.state.bannerList || []}/>
                </div>
                <div className="homeMidBar">
                    {list}
                </div>
                <div className="homeAd">
                    <AdList/>
                </div>
                <div className="homeProductList">
                    <h2>推荐产品</h2>
                    <ProductList item={this.state.homeProductList || []}/>
                </div>
                <FootNavBar navBarIndex={1}/>
            </div>
        )
    }
}

ReactMixin.onClass(Home,Reflux.connect(Store));
